<template>
  <div class="hyydxq">
    <van-cell style="border-top: 1px #eee solid">
      <div class="flex-center" @click="showPicker1 = true">
        <div class="col-37B5B5 m-r-10">{{ timeChoice || '请选择时间' }}</div>
        <div>
          <img width="8px" src="../../assets/img/bzsc/selectDown.png" />
        </div>
      </div>
    </van-cell>
    <div class="content">
      <div>
        <p>羔羊入舍数量</p>
        <p>{{ lambing.countLambingNum }}</p>
        <p>
          <span> 公羔：{{ lambing.maleLambNum }} </span>
          <span> 母羔：{{ lambing.femaleLambNum }} </span>
        </p>
      </div>
      <p></p>
      <div>
        <p>断奶成活数量</p>
        <p>{{ lambing.countRobustFemaleLambNum }}</p>
        <p>
          <span> 公羔：{{ lambing.robustMaleLambNum }} </span>
          <span> 母羔：{{ lambing.robustFemaleLambNum }} </span>
        </p>
      </div>
    </div>
    <title-panel title="成活率" />
    <div class="rateSurvival">
      <div>
        <van-circle
          :stroke-width="70"
          size="80px"
          layer-color="#EEEEEE"
          color="#59D6D6"
          :speed="1000"
          v-model="lambing.survivalRate"
          :rate="lambing.survivalRate"
          :text="lambing.survivalRate+'%'"
        />
        <p><i /> <span>总成活率</span></p>
      </div>
      <div>
        <van-circle
          :stroke-width="70"
          size="80px"
          layer-color="#EEEEEE"
          color="#8B9FF3"
          :speed="1000"
          v-model="lambing.maleLamSurvivalRate"
          :rate="lambing.maleLamSurvivalRate"
          :text="lambing.maleLamSurvivalRate+'%'"
        />
        <p><i style="background: #8b9ff3" /> <span>公羔成活率</span></p>
      </div>
      <div>
        <van-circle
          :stroke-width="70"
          size="80px"
          layer-color="#EEEEEE"
          color="#FEC289"
          :speed="1000"
          v-model="lambing.femaleLambSurvivalRate"
          :rate="lambing.femaleLambSurvivalRate"
          :text="lambing.femaleLambSurvivalRate+'%'"
        />
        <p><i style="background: #fec289" /> <span>母羔成活率</span></p>
      </div>
    </div>
    <van-popup v-model="showPicker1" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年份"
        :columns-order="['month', 'year', 'day']"
        @confirm="onConfirmStartDate"
        @cancel="showPicker1 = false"
        :formatter="formatter"
      />
    </van-popup>
  </div>
</template>

<script>
// 羊羔统计
import { getValue, setValue } from '@/utils/auth'
import { Toast, Cell, Tab, Tabs, Collapse, CollapseItem, Popup, DatetimePicker, Circle } from 'vant'
import { getHandle, postHandle } from '@/api'
import TitlePanel from '@/components/titlePanel'
import dayjs from 'dayjs'
export default {
  components: {
    TitlePanel,
    [Cell.name]: Cell,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [Toast.name]: Toast,
    [Collapse.name]: Collapse,
    [CollapseItem.name]: CollapseItem,
    [Popup.name]: Popup,
    [DatetimePicker.name]: DatetimePicker,
    [Circle.name]: Circle
  },
  data() {
    return {
      showPicker1: false,
      currentDate: new Date(),
      timeChoice: '',
      lambing: {
      }
    }
  },
  computed: {
    // text() {
    //   console.log(!!this.lambing.survivalRate ? this.lambing.survivalRate*100 + '%' : '0%',7771)
    //   return !!this.lambing.survivalRate ? this.lambing.survivalRate*100 + '%' : '0%'
    // },
    // text1() {
    //   return !!this.lambing.maleLamSurvivalRate ? this.lambing.maleLamSurvivalRate*100 + '%' : '0%'
    // },
    // text2() {
    //   return !!this.lambing.femaleLambSurvivalRate ? this.lambing.femaleLambSurvivalRate*100 + '%' : '0%'
    // },
  },
  watch: {},
  created() {},
  mounted() {
    this.timeChoice = dayjs(this.currentDate).format('YYYY')
    this.rateSurvival1()
  },
  methods: {
    onConfirmStartDate(value) {
      this.timeChoice = dayjs(value).format('YYYY')
      //   this.operationRecords()
      this.rateSurvival1()
      this.showPicker1 = false
    },
    rateSurvival1() {
      getHandle('/agri/api/yzbzh/lambingRecord/lambBreedingStatistics', {
        subjectInfoId: getValue('loginUserId'),
        selectDate: this.timeChoice
      }).then(res => {
          if(res.status == 0){
              this.lambing = res.data.data
              this.lambing.survivalRate  = res.data.data.survivalRate*100
              this.lambing.maleLamSurvivalRate  = res.data.data.maleLamSurvivalRate*100
              this.lambing.femaleLambSurvivalRate  = res.data.data.femaleLambSurvivalRate*100
          }

      })
    },
    formatter(type, val) {
      if (type === 'year') {
        return `${val}`
        //   } else if (type === 'month') {
        //     return `${val}`
      }
      //   return val
    }
  }
}
</script>

<style lang="scss" scoped>
.rateSurvival {
  display: flex;
  justify-content: space-around;
  > div {
    width: 33%;
    display: flex;
    flex-direction: column;
    align-items: center;
    > p {
      display: flex;
      align-items: center;
      margin-top: 10px;
      > i {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 6px;
        background-color: #59d6d6;
        margin-right: 6px;
      }
      > span {
        font-size: 14px;
        font-weight: 400;
        color: #333333;
      }
    }
  }
}
.content {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 114px;
  align-items: center;
  background-color: #fff;
  > div {
    width: 49%;
    display: flex;
    flex-direction: column;
    align-items: center;
    > p {
      &:first-child {
        font-size: 15px;
        font-weight: 400;
        color: #333333;
      }
      &:nth-child(2) {
        font-size: 20px;
        font-weight: bold;
        color: #37b5b5;
        margin: 10px 0;
      }
      &:last-child {
        font-size: 13px;
        font-weight: 400;
        color: #666666;
        > span {
          &:first-child {
            margin-right: 11px;
          }
        }
      }
    }
  }
  > p {
    height: 60px;
    width: 1px;
    background-color: #eeeeee;
  }
}
</style>
